<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('饼状图医废类型')"/>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight" style="height: 95%">


    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>医废种类饼状图</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <!--<a class="dropdown-toggle" data-toggle="dropdown" href="graph_flot.html#">-->
                    <!--<i class="fa fa-wrench"></i>-->
                <!--</a>-->
                <!--<ul class="dropdown-menu dropdown-user">-->
                    <!--<li><a href="graph_flot.html#">选项1</a>-->
                    <!--</li>-->
                    <!--<li><a href="graph_flot.html#">选项2</a>-->
                    <!--</li>-->
                <!--</ul>-->
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content h-full">
            <div class="echarts  h-full" id="echarts-pie-chart"></div>
        </div>
    </div>


</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: echarts-js"/>
<script type="text/javascript">

    var prefix = ctx + "yf/reports";
    $(function () {


        var pieChart = echarts.init(document.getElementById("echarts-pie-chart"));
        let bgColor = '#fff';
        let title = '总量';
        let color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0'];
        let echartData = [];
        let total = 0;

        let formatNumber = function (num) {
            let reg = /(?=(\B)(\d{3})+$)/g;
            return num.toFixed(2).toString().replace(reg, ',');
        }

        $.post(prefix + "/echarets/trashTypeStatistics", null, function (res) {     // "/echarets/trashType"
            if (res.code == 0) {
                echartData = res.rows
                total = formatNumber(echartData.reduce((a, b) => {
                    console.log(a, b.value)
                    return a + b.value * 1
                }, 0));
                option.title[0].text = '{name|' + title + '（Kg）}\n{val|' + total + '}'
                option.series[0].data = echartData
                pieChart.setOption(option);
                $(window).resize(pieChart.resize);
                console.log(res)
            }

        });


        var option = {
            backgroundColor: bgColor,
            color: color,
            // tooltip: {
            //     trigger: 'item'
            // },
            title: [{
                text: '',
                top: 'center',
                left: 'center',
                textStyle: {
                    rich: {
                        name: {
                            fontSize: 14,
                            fontWeight: 'normal',
                            color: '#666666',
                            padding: [10, 0]
                        },
                        val: {
                            fontSize: 20,
                            fontWeight: 'bold',
                            color: '#333333',
                        }
                    }
                }
            }, {
                // text: '单位：Kg',
                top: 20,
                right: 20,
                textStyle: {
                    fontSize: 14,
                    color: '#666666',
                    fontWeight: 400
                }
            }],
            legend: {
                orient: 'vertical',
                icon: 'rect',
                top: 20,
                left: 20,
                // x: '80%',
                // y: 'center',
                itemWidth: 12,
                itemHeight: 12,
                align: 'left',
                textStyle: {
                    rich: {
                        name: {
                            fontSize: 12
                        },
                        value: {
                            fontSize: 16,
                            padding: [0, 5, 0, 15]
                        },
                        unit: {
                            fontSize: 12
                        }
                    }
                },
                formatter: function (name) {
                    let res = echartData.filter(v => v.name === name);
                    res = res[0] || {};
                    let unit = res.unit || 'Kg';
                    return '{name|' + name + '}  {value|' + res.value + '}{unit|' + unit + '}'
                }
                // data: legendName
            },
            series: [{
                type: 'pie',
                radius: ['45%', '60%'],
                center: ['50%', '50%'],
                data: [],
                hoverAnimation: false,
                itemStyle: {
                    normal: {
                        borderColor: bgColor,
                        borderWidth: 2
                    }
                },
                labelLine: {
                    normal: {
                        length: 20,
                        length2: 120,
                        lineStyle: {
                            color: '#e6e6e6'
                        }
                    }
                },
                label: {
                    normal: {
                        formatter: params => {
                            return (
                                '{icon|●}{name|' + params.name + '}{value|' +
                                formatNumber(params.value) + '} {unit|Kg }' + params.percent + '%'
                            );
                        },
                        padding: [0, -100, 25, -100],
                        rich: {
                            icon: {
                                fontSize: 16
                            },
                            name: {
                                fontSize: 14,
                                padding: [0, 10, 0, 4],
                                color: '#666666'
                            },
                            value: {
                                fontSize: 18,
                                fontWeight: 'bold',
                                color: '#333333'
                            },
                            unit: {
                                fontSize: 18,
                                fontWeight: 'bold',
                                color: '#000000'
                            }
                        }
                    }
                },
            }]
        };

    });
</script>
</body>
</html>